import { useEffect, useState } from 'react'
import { GlobalOutlined } from '@ant-design/icons'
import { Select } from 'antd'
import { changeLuanguage, getCurrentLanguage, getSupportLanguage } from '../locale/i18n'
const LuanguageSwitch = () => {
	const SupportLanguage = getSupportLanguage()
	const [CurrentLanguage, setCurrentLanguage] = useState<string>('zh')
	useEffect(() => {
		setCurrentLanguage(getCurrentLanguage())
	}, [])
	// 当切换语言的时候
	const handleChange = (value: string) => {
		setCurrentLanguage(value)
		changeLuanguage(value)
	}
	return (
		<Select
			value={CurrentLanguage}
			onChange={handleChange}
			options={SupportLanguage.map((item) => {
				return {
					value: item.code,
					label: item.name
				}
			})}
			allowClear={false}
			//icon 
			suffixIcon={<GlobalOutlined />}
		/>
	)
}

export default LuanguageSwitch